<template>
  <div class="components-container">
    <div class="center-container">
      <div class="center-container-div">
        <cinrad-map
          :init-layers-visible="layersVisible"
          :init-datetime="computedDatetime"
          :init-features="features"
          :init-selected-region="regionValue"
          :init-product-value="productValue"
          :init-overlay-type="false"
          :init-map-width="mapSize[0]"
          :init-map-height="mapSize[1]"
          :init-info-width="mapSize[2]"
          :init-map-resolution="mapPresolution"
          :init-map-center="mapCenter"
          :init-mouse-coordinate="mousePointer"
          @move_end="handleMoveend"
          @product_change="handleProductChange"
          @pointer_move="handlePointerMove"
        />
      </div>
      <div class="center-container-div">
        <cinrad-map
          :init-layers-visible="layersVisible"
          :init-datetime="computedDatetime"
          :init-features="features"
          :init-selected-region="regionValue"
          :init-product-value="productValue2"
          :init-overlay-type="false"
          :init-map-width="mapSize[0]"
          :init-map-height="mapSize[1]"
          :init-info-width="mapSize[2]"
          :init-info-left="false"
          :init-info-right="true"
          :init-map-resolution="mapPresolution"
          :init-map-center="mapCenter"
          :init-mouse-coordinate="mousePointer"
          @move_end="handleMoveend"
          @pointer_move="handlePointerMove"
        />
      </div>
      <div class="center-container-div">
        <radar-control
          :init-layers-visible="layersVisible"
          :init-layers-visible-option="layersVisibleOption"
          :init-product-value="productValue"
          :init-layers-opacity="layersOpacity"
          :init-case-type="true"
          :init-size="{width: '220px',height: '738px',selectedWidth: '185px',selectedHeight: '520px'}"
          @update_cinrad="handleUpdateCinrad"
          @update_features="handleUpdateFeatures"
          @region_change="handleRegionChange"
          @layers_visible_change="handleLayersVisibleChange"
          @opacity_change="handleOpacityChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CinradMap from './components/radarMap'
import ToolBar from './components/toolBar'
import RadarControl from './components/radarControl'

export default {
  name: 'CinradUnion2',
  components: { CinradMap, ToolBar, RadarControl },
  props: {
    logName: {
      type: String,
      default: 'Cinrad-Union2:'
    },
    initDefaultProduct: {
      type: String,
      default: '0'
    },
    initToolHeader: {
      type: Boolean,
      default: true
    },
    initToolFooter: {
      type: Boolean,
      default: false
    },
    initInfoLeft: {
      type: Boolean,
      default: true
    },
    initInfoRight: {
      type: Boolean,
      default: false
    },
    initProductValue: {
      type: Array,
      default: function() {
        return this.appOptions.defaultProductValue['cinrad_overlay']
      }
    },
    initProductValue2: {
      type: Array,
      default: function() {
        return this.appOptions.defaultProductValue['cinrad_overlay2']
      }
    }
  },
  data() {
    return {
      datetime: '2000-01-01T08:00:00Z',
      features: [],
      regionValue: this.appOptions.defaultRegion,
      layersVisible: this.appOptions.layerOption.defaultVisibleLayers,
      overlayType: true,
      layersVisibleOption: this.appOptions.layerOption
        .defaultLayersVisibleOption,
      productValue: this.initProductValue,
      productValue2: this.initProductValue2,
      layersOpacity: this.appOptions.layerOption.layersOpacity,
      mapPresolution: null,
      mapCenter: null,
      mousePointer: [0, 0],
      mapSize: [576, 704, 150]
    }
  },
  computed: {
    computedDatetime: function() {
      return [this.productValue, this.datetime]
    }
  },
  methods: {
    handleUpdateCinrad(val) {
      console.debug(this.logName + 'handleUpdateCinrad:' + val)
      if (val) {
        this.datetime = val[1]
      }
    },
    handleUpdateFeatures(val) {
      console.debug(this.logName + 'handleUpdateFeatures:')
      if (val) {
        this.features = val
      } else {
        this.features = []
      }
    },
    handleRegionChange(val) {
      console.debug(this.logName + 'handleRegionChange:' + val)
      this.regionValue = val
    },
    handleMoveend(resolution, center) {
      console.debug(
        this.logName + 'handleMoveend1:' + resolution + ':' + center
      )
      if (resolution !== this.mapPresolution) {
        this.mapPresolution = resolution
      }
      if (center !== this.mapCenter) {
        this.mapCenter = center
      }
    },
    handleMoveend2(resolution, center) {
      console.debug(
        this.logName + 'handleMoveend2:' + resolution + ':' + center
      )
    },
    handleLayersVisibleChange(val) {
      console.debug(this.logName + 'handleLayersBisibleChange:' + val)
      this.layersVisible = val
    },
    handleProductChange: function(val) {
      console.debug(this.logName + 'handleProductChange:' + val)

      this.productValue = val
    },
    handleOpacityChange: function(val) {
      console.debug(this.logName + 'handleOpacityChange:' + val)

      this.layersOpacity = val
    },
    handlePointerMove: function(val) {
      console.debug(this.logName + 'handlePointerMove:' + val)

      this.mousePointer = val
    }
  }
}
</script>

<style  scoped>
.components-container {
  position: relative;
  height: calc(100vh - 116px);
  display: table;
  margin: 0 auto;
}

.center-container {
  /* By setting flex-grow to 1, the main content will take up
   all of the remaining space on the page.
   The other elements have flex-grow: 0 and won't contest the free space. */
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.center-container-div {
  display: inline-block;
  vertical-align: middle;
}

.bottom-container {
  /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  min-height: 30px;
  width: 100%;
}
</style>
